<template>
  <div class="item2-list">
    <van-list :finished="true">
      <div class="items">
        <div class="items-column" style="margin-right: 10px;">
          <item2
            class="item"
            v-for="(item, i) in items1"
            v-bind:key="i"
            :title="item.title"
            :price="item.price"
            :volume="item.volume"
            :rebate="item.rebate"
            :image="item.image"
            :token="item.token"
            :coupon="item.coupon ? item.coupon.amount : null"
            :originalPrice="item.originalPrice"
            @click="clickItem"
          />
        </div>
        <div class="items-column">
          <item2
            class="item"
            v-for="(item, i) in items2"
            v-bind:key="i"
            :title="item.title"
            :price="item.price"
            :volume="item.volume"
            :rebate="item.rebate"
            :image="item.image"
            :token="item.token"
            :coupon="item.coupon ? item.coupon.amount : null"
            :originalPrice="item.originalPrice"
            @click="clickItem"
          />
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import Item2 from "@/components/item/Item2.vue";
import { List } from "vant";
export default {
  name: "Item2List",
  components: {
    Item2,
    [List.name]: List
  },
  data() {
    return {
      items1: [],
      items2: []
    };
  },
  methods: {
    push(items) {
      for (let i = 0; i < items.length; i++) {
        if (i % 2 === 0) {
          this.items1.push(items[i]);
        } else {
          this.items2.push(items[i]);
        }
      }
    },
    replace(items) {
      this.items1.length = 0;
      this.items2.length = 0;
      this.push(items);
    },
    clickItem(token) {
      this.$emit("click", token);
    }
  }
};
</script>

<style scoped>
.items {
  display: flex;
  flex-direction: row;
}

.items-column {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.item {
  margin-bottom: 10px;
}
</style>